$(function () {
    // 判断用户是否登录 - 判断cookie中是否存有username
    var username = getCookie('username')
    var login = document.querySelector(".login");
    if (username) {
        var str = `
          <li><a>欢迎尊贵的<span>${username}</span>VIP来到学习网站！</a></li>
          <li><a href="javascript:;" class="logout">退出</a></li>
      `
        login.innerHTML = str;
        // 退出功能
        var logout = document.querySelector(".logout");
        logout.onclick = function () {
            layer.confirm('你确定要退出吗？', {
                    btn: ['确定', '取消'] //按钮
                },
                function () {
                    // 删除cookie
                    delCookie('username');
                    login.innerHTML = `
                      <li><a href="denglu.html">登陆</a></li>
                      <li><a href="zhuce.html">注册</a></li>
                  `
                    var msgindex = layer.msg("退出成功", {
                        icon: 1
                    })
                    setTimeout(function () {
                        layer.close(msgindex)
                        location.href = 'index.html';
                    }, 2000)
                },
                function () {
                    layer.msg("已取消", {
                        icon: 1,
                        time: 20000,
                        btn: ['你做出了不错的选择','干的漂亮']
                    })
                    return false;
                }
            );
        }
    } else {
        // 用户没有登录就让用户去登陆
        var msgindex = layer.msg("请先登录", {
            icon: 2,
        })
        setTimeout(function () {
            layer.close(msgindex)
            location.href = 'denglu.html';
        }, 2000);
    }

    // 请求购物车数据
    var data = localStorage.getItem('data');
    if (!data || JSON.parse(data).length == 0) {
        var str = `
          <div style="padding-left:10px;" class="jumbotron">
              <h1>购物车空空如也!</h1>
              <p>赶快去列表页挑选商品吧</p>
              <p><a class="btn btn-primary btn-lg" href="list.html" role="button">去列表页</a></p>
          </div>
      `
        $('.cart .content').html(str)
    } else {
        var arr = JSON.parse(data);
        // 从本地存储中获取到所有当前用户的数据
        var crr = arr.map(v => {
            if (v.username === username) {
                return v.id
            }
        });

        // 遍历brr数组将数组中的非undefined取出来
        var brr = [];
        for (var i = 0; i < crr.length; i++) {
            if (crr[i] !== undefined) {
                brr.push(crr[i]);
            }
        }

        if (brr.length == 0) {
            // 判断brr是否为空，如果为空表示该用户在localStrage中没有数组
            var str = `
                <div style="padding-left:10px;" class="jumbotron">
                    <h1>购物车空空如也!</h1>
                    <p>赶快去列表页挑选商品吧</p>
                    <p><a class="btn btn-primary btn-lg" href="list.html" role="button">去列表页</a></p>
                </div>
                `
            $('.cart .content').html(str)
        } else {            
            // 将所有数据的商品id拼接在一起
            var ids = brr.join(',')            
            var loadindex = layer.load( {shade: true}); // ajax请求，先来一个加载层
            $.ajax({
                url: '../serves/cart.php',
                data: {ids: ids},
                dataType: "json",
                success(res) {
                    // 变量data接收数据
                    var data = res.data
                    var str = '';
                    for (var i = 0; i < data.length; i++) {
                        //  取出当前用户的购物车中每个景点的数量
                        var number = arr.find(v => v.username === username && v.id == data[i].id).num;
                        str += `
                        <tr valign="bottom">
                            <td><input type="checkbox" name="selectOne"></td>
                            <td><img src="${data[i].imgpath.split('========')[0]}" width="50" height="50"></td>
                            <td>${data[i].name}</td>
                            <td class="price">￥<span>${data[i].price}</span></td>
                            <!--在标签中记录对应商品的id和库存-->
                            <td class="number" data-stock="${data[i].stock}" data-id="${data[i].id}">
                                <button class="btn btn-default reduce">-</button>
                                <input type="text" name="number" value="${number}">
                                <button class="btn btn-default add">+</button>
                            </td>
                            <td class="subtotal">￥<span>${data[i].price * number}</span></td>
                            <td><button class="btn btn-danger remove">移除</button></td>
                        </tr>
                    `
                    }
                    $('.cart table tbody').html(str)
                    setTimeout(function(){
                        layer.close(loadindex);
                      }, 2000);// 关闭加载层
                    // 全选单选事件
                    select();
                    // 数量加减
                    addAndReduce()
                    // 移除
                    remove()
                    // 计算总数和总价
                    total()
                }
            })
        }
    }
    // 计算总数和总价
    function total() {
        var totalNum = 0; // 商品总数
        var totalPrice = 0; // 商品总价
        $('[name="selectOne"]:checked').each(function (i, v) {
            totalNum += $(v).parent().siblings('.number').find('input[name="number"]').val() - 0
            totalPrice += $(v).parent().siblings('.subtotal').find('span').text() - 0
        })
        //   console.log(totalNum);
        $('.totalNum').text(totalNum)
        $('.totalPrice').text(totalPrice)
    }
    // 全选单选
    function select() {
        $('[name="selectAll"]').click(function () {
            // console.log($(this).prop('checked'));
            $('[name="selectOne"]').prop('checked', $(this).prop('checked'))
            $('[name="selectAll"]').prop('checked', $(this).prop('checked'))
            total()
        })
        $('[name="selectOne"]').click(function () {
            //   将jq获取的元素集合(伪数组)转为一个元素数组集合
            var selectArr = Array.prototype.slice.call($('[name="selectOne"]'));
            //   只有数组中的元素都是checked 返回才是true
            var selectStatus = selectArr.every(v => v.checked)
            // 所以的单选都选上的时候后，全选也勾选上
            $('[name="selectAll"]').prop('checked', selectStatus)
            total()
        })
    }
    // 数量加减
    function addAndReduce() {
        $('table .number .add').click(function () {
            var num = $(this).prev().val() - 0;
            $('table .number .reduce').prop('disabled', false)
            num++;
            if (num >= $(this).parent().attr('data-stock')) { // num不能大于库存量
                num = $(this).parent().attr('data-stock')
                // $(this).prop('disabled', true)
                layer.msg('库存不足');
            }
            $(this).prev().val(num)
            // 修改本地存储
            var data = JSON.parse(localStorage.getItem('data')); // 获取本地localStorage数据
            var id = $(this).parent().attr('data-id'); // 找到商品id
            var obj = data.find(v => v.username === username && v.id === id); // 根据商品id和用户名找到本地购物车localStorage中的对象数据
            obj.num = num; // 将修改后的购买数量赋值给data数据
            localStorage.setItem('data', JSON.stringify(data)); // 将data存储到localStorage中
            // 计算小计
            var price = $(this).parent().siblings(".price").find('span').text() - 0
            var subtotal = price * num;
            $(this).parent().siblings('.subtotal').find('span').text(subtotal)
            total()
        })
        $('table .number .reduce').click(function () {
            var num = $(this).next().val() - 0;
            $('table .number .add').prop('disabled', false)
            num--;
            if (num <= 1) {
                num = 1
                $(this).prop('disabled', true)
            }
            $(this).next().val(num)
            // 修改本地存储
            var data = JSON.parse(localStorage.getItem('data'))
            var id = $(this).parent().attr('data-id');
            var obj = data.find(v => v.username === username && v.id === id)
            obj.num = num;
            localStorage.setItem('data', JSON.stringify(data))
            // 计算小计
            var price = $(this).parent().siblings(".price").find('span').text() - 0
            var subtotal = price * num;
            $(this).parent().siblings('.subtotal').find('span').text(subtotal)
            total()
        })
    }
    // 移除
    function remove() {
        $('.remove').click(function () {
            var that = $(this); // 将绑定点击事件的这个按钮的jq对象存储起来
            layer.confirm('你确定要删除吗？', {
                    btn: ['确定', '取消'] //按钮
                },
                function () {
                    //   拿到本地localStorage中的数据
                    var data = JSON.parse(localStorage.getItem('data'))
                    //   获取到商品id
                    var id = that.parent().siblings('.number').attr('data-id');
                    //   获取到要删除的商品在data中的索引
                    var index = data.findIndex(v => v.username === username && v.id === id)
                    //   删除data中的对应的景点信息
                    data.splice(index, 1)
                    //   移除页面元素
                    that.parent().parent().remove()
                    total(); // 重新计算总价
                    //   将移除之后的数据写入localStorage
                    localStorage.setItem('data', JSON.stringify(data))
                    layer.msg("删除成功", {
                        icon: 1,
                        time: 500
                    })
                    data = JSON.parse(localStorage.getItem('data'))
                    if (!data.length) {
                        var str = `
                          <div style="padding-left:10px;" class="jumbotron">
                              <h1>购物车空空如也!</h1>
                              <p>赶快去列表页挑选商品吧</p>
                              <p><a class="btn btn-primary btn-lg" href="list.html" role="button">去列表页</a></p>
                          </div>
                      `
                        $('.cart .content').html(str)
                    }
                },
                function () {
                    layer.msg("已取消", {
                        icon: 1,
                        time: 500
                    })
                    return false;
                }
            );

        })
    }
})
